<template>
  <div class="container">
    <div class="headerSearchForm">
      <el-form
        ref="headerSearchForm"
        :model="headerSearchForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="指标编号" prop="targetName">
          <el-input
            v-model="headerSearchForm.targetName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="装填" prop="filling">
          <el-select
            v-model="headerSearchForm.filling"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in fillingData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标项" prop="targetItem">
          <el-select
            v-model="headerSearchForm.targetItem"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in targetItemData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right; overflow: hidden">
          <el-button type="primary" class="btn">查询</el-button>
          <el-button type="primary" class="btn">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col>
          <el-button type="primary" class="gray-btn" @click="add"
            >新增</el-button
          >
          <el-button type="primary" class="btn" @click="editInfo"
            >修改</el-button
          >
          <el-button type="primary" class="btn">删除</el-button>
          <el-button type="primary" class="btn">导入</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-contant">
      <div class="table-panle">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="指标名称"
            align="center"
            prop="targetName"
          ></el-table-column>
          <el-table-column
            label="指标编号"
            align="center"
            prop="targetNumber"
          ></el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
          ></el-table-column>
          <el-table-column
            label="指标项"
            align="center"
            prop="targetItem"
          ></el-table-column>
          <el-table-column
            label="对象类型"
            align="center"
            prop="objectType"
          ></el-table-column>
          <el-table-column
            label="统计周期"
            align="center"
            prop="statisticalPeriod"
          ></el-table-column>
          <el-table-column
            label="业务品种"
            align="center"
            prop="operationVariety"
          ></el-table-column>
          <el-table-column
            label="创建人"
            align="center"
            prop="creator"
          ></el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
        style="text-align: right"
      >
      </el-pagination>
    </div>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      destroy-on-close
      width="700px"
    >
      <el-form ref="dialogForm" :model="dialogForm" inline label-width="180px">
        <el-form-item label="指标名称" prop="targetName">
          <el-input v-model="dialogForm.targetName" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="指标编号" prop="targetNumber">
          <el-input v-model="dialogForm.targetNumber" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="dialogForm.status" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="指标项" prop="targetItem">
          <el-input v-model="dialogForm.targetItem" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="对象类型" prop="objectType">
          <el-input v-model="dialogForm.objectType" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="统计周期" prop="statisticalPeriod">
          <el-input v-model="dialogForm.statisticalPeriod" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="业务品种" prop="operationVariety">
          <el-input v-model="dialogForm.operationVariety" placeholder="请输入">
          </el-input>
        </el-form-item>
      </el-form>
      <el-form-item label="创建人" prop="creator">
        <el-input v-model="dialogForm.creator" placeholder="请输入"> </el-input>
      </el-form-item>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 1,
      dialogVisible: false,
      title: '',
      tableData: [
        {
          targetName: '111111111',
          targetNumber: '累计交易总额',
          status: '生效',
          targetItem: '规模类',
          objectType: '交易对手',
          statisticalPeriod: '年',
          operationVariety: '国债',
          creator: '李国红',
        },
        {
          targetName: '111111111',
          targetNumber: '累计交易总额',
          status: '生效',
          targetItem: '规模类',
          objectType: '交易对手',
          statisticalPeriod: '年',
          operationVariety: '国债',
          creator: '李国红',
        },
      ],
      headerSearchForm: {
        targetName: '',
        filling: '',
        targetItem: '',
      },
      fillingData: [],
      targetItemData: [],
      dialogForm: {
        targetName: '',
        targetNumber: '',
        status: '',
        targetItem: '',
        objectType: '',
        statisticalPeriod: '',
        operationVariety: '',
        creator: '',
      },
      tableSelecteData: [],
    }
  },
  methods: {
    pageFn() {},
    add() {
      this.title = '新增'
      this.dialogVisible = true
    },
    editInfo() {
      if (this.tableSelecteData.length === 1) {
        this.title = '编辑'
        this.dialogForm=this.tableSelecteData[0]
        this.dialogVisible = true
      } else {
        this.$message.warning('请选择一条数据')
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.tableSelecteData = val
    },
    handleOk() {},
  },
}
</script>

<style lang="scss" scoped>
.container {
  .headerSearchForm {
    padding: 24px;
    background: #262d47;
    margin-bottom: 16px;
  }
  .table-contant {
    background: #262d47;
    padding: 24px;
    .table-panle {
      min-height: 500px;
    }
  }
}
::v-deep {
  .el-dialog {
    border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
}
</style>
